<template>

  <w-docview>


    <w-tabs :current="focusTabID" height="*">
      <w-tab v-for="item in tabs" :key="item.id" :text="item.text" :data="item" @click="clickTab(item)"
        :closable="!true" @click:close="closeButton">
        <w-view :template="item.tmpl" :data="item.params" />
      </w-tab>
    </w-tabs>

  </w-docview>
</template>

<script>
  import $ from './dfish.js'
  import HelloWorld from '@/components/HelloWorld.vue'
  import FormView from '@/components/FormView.vue'

  export default {
    components: {
      HelloWorld,
      FormView
    },
    provide() {
      return {
        indexView: this
      }
    },
    data() {
      return {
        hello: 'hello, world'
      }
    },
    methods: {
      buttnText() {
        console.log('buttnText')
      },
      showDetail() {
        return false
      },
      getImgSrc(a) {
        return `http://127.0.0.1/vue/img/${a}.jpg`
      },
      checkboxChange() {
        this.$refs.text.x.value = 'eee'
      },
      alert(e) {
        //$(e).cmd({type: 'Alert', text: '提个小示', timeout: 2000, yes1: () => console.log('alert yes')})

        $.alert('ddd', null, 1000)

      },
      confirm(e) {
        $(e).exec({
          type: 'Confirm',
          text: '确定这么搞？$0',
          yes: {
            type: 'Ajax',
            src: 'widget.php?act=save',
            data: {
              id: '33'
            },
            success(res) {
              console.log(res)
            }
          }
        }, ['fff'])
      },
      click(e) {
        this.hello = "dfe"
      },
      clickTab(item) {
        this.focusTabID = item.id
        location.href = '#' + item.id
      },
      closeButton(e) {
        let i = this.tabs.findIndex(v => v.id == $(e).data.id)
        let f = $(e).isCurrent
        this.tabs.splice(i, 1)
        if (f) {
          let t = this.tabs[i] || this.tabs[i - 1]
          if (t) {
            this.focusTabID = t.id
          } else {
            this.focusTabID = '00'
          }
        }
      },
      addTab() {
        this.tabs.push({
          id: '04',
          text: '444',
          tmpl: 'task/LionView'
        })
        this.focusTabID = '04'
      },
      removeTab() {
        this.tabs.splice(2, 1)
      },
      clickLeaf(e) {
        console.log($(e).data)
        if ($(e).data.id == '100') $(e).toggle()
        this.focusLeafID = $(e).getKey()
      }

    },
    data() {
      return {
        htmlStr: '<b>red</b>',
        focusTabID: '',
        focusLeafID: 'root',
        hello: 'hello',
        focusTabName: 'typeTab',
        focusImg: 'img001',

        tabs: [{
            id: 'layout',
            text: '布局',
            tmpl: 'LayoutView',
            params: {},
          },
          {
            id: 'func',
            text: '功能',
            tmpl: 'FuncView',
            params: {
              org: 'dd'
            },
          },
          {
            id: 'form',
            text: '表单',
            tmpl: 'FormView',
            params: {},
          },
        ],

        height: 700,
        airs: [{
            src: 'https://wx2.sinaimg.cn/mw690/002ujtFnly1gokfy8em5dj61900u0b2b02.jpg'
          },
          {
            src: 'https://wx1.sinaimg.cn/mw690/002ujtFnly1gokfy8d35zj61ki0u0e8102.jpg'
          },
          {
            src: 'https://wx4.sinaimg.cn/mw690/002ujtFnly1gokfypeg5zj615s0u04qp02.jpg'
          },
          {
            src: 'https://wx1.sinaimg.cn/mw690/002ujtFnly1gokfy5f865j61bt0u0x6p02.jpg'
          },
          {
            src: 'https://wx4.sinaimg.cn/mw690/002ujtFnly1gokfy8j3iej61900u0e8202.jpg'
          },
          {
            src: 'https://wx1.sinaimg.cn/mw690/002ujtFnly1gokfy5x8daj61900u0e8202.jpg'
          },
          {
            src: 'https://wx1.sinaimg.cn/mw690/002ujtFnly1gokfy8o89gj61900u0npd02.jpg'
          },
          {
            src: 'https://wx4.sinaimg.cn/mw690/002ujtFnly1gokfy64e08j61hc0u0e8202.jpg'
          },
          {
            src: 'https://wx2.sinaimg.cn/mw690/002ujtFnly1gokfy8pt3jj61er0u0kjn02.jpg'
          }
        ],
        rooms: [{
            src: 'https://wx2.sinaimg.cn/mw690/a0588ef3ly1gokvc3je7ej20u00js792.jpg'
          },
          {
            src: 'https://wx4.sinaimg.cn/mw690/0073s9l2ly1gohh8esf8zj30u013zmz4.jpg'
          }
        ]
      }
    },
    mounted() {

      let tab = $.urlParam(document.location.href, '#')

      this.focusTabID = tab || 'layout'


      // $.ajax({
      //   src: '',
      //   success: (data) => {
      //     console.log(data)
      //   }
      // })

      // $.ajax.post('widget.php?act=save', {test: 22, foo: {d: 1}})
      //   .then(data => {
      //     console.log('then', data.data)
      //   })
      //   .catch(ex => {
      //     console.log('catch', ex)
      //   })

    }
  }
</script>

<style>
  html,
  body {
    margin: 0
  }

  .x-leaf.z-on {
    background-color: #eee;
  }

  .x-btn.z-on {
    background: #465fff;
    color: #fff;
  }

  .item {
    font-size: 36px;
    text-align: center;
    border: 1px solid #e5e4e9;
  }

  .item-1 {
    background-color: #ef342a;
  }

  .item-2 {
    background-color: #f68f26;
  }

  .item-3 {
    background-color: #4ba946;
  }

  .item-4 {
    background-color: #0376c2;
  }

  .item-5 {
    background-color: #c077af;
  }

  .item-6 {
    background-color: #f8d29d;
  }

  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .mm1 {
    padding: 0 10px;
  }
</style>
